<template>
<div class="home-container">
  <div class="title">{{config.title}}</div>
  <div class="header">
    <img class="header__img"
    :src="config.src"
    @click="imgClick">
  </div>
  <div class="content">

<!--    <img class="content__img"-->
<!--         :src="config.btnurl"-->
<!--         @click="btnClick">-->

<!--    <ul v-for="i in config.btns" class="clear">-->
<!--        <img class="content__img"-->
<!--             :src="i.btnurl"-->
<!--             @click="btnClick">-->
<!--    </ul>-->

    <div class="content_item" :class="curSelect==item.id?'opacity':''" v-for="(item,index) in config.btns" :key="index" @touchstart="touchstart(index)" @touchend="touchend">
      <img :src="item.btnurl" width="40" height="40" >
      {{item.name}}
    </div>

  </div>
</div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  methods: {
    imgClick() {
      window.location.href = this.config.link;
    },
    btnClick() {
      for (const item of this.config.btns) {
        window.location.href = item.btnlink;
      }
    },
    touchstart(e) {
      const that = this;
      const list = that.config.btns;
      for (let i = 0, len = list.length; i < len; ++i) {
        if (list[i].id === e) {
          that.curSelect = i;
          window.location.href = list[i].btnlink;
        }
      }
    },
    touchend() {
      const that = this;
      that.curSelect = null;
    }
  }
};
</script>

<style lang="less" scoped>
.home-container {
  margin: 0 0 16px 0;
}

.title {
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  padding: 10px 0;
  font-size: 20px;
  color: white;
  text-align: center;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px;

  &__img {
    border-radius: 8px;
    max-width: 240px;
    max-height: 240px;
    cursor: pointer;
  }
}

.content{
  display: flex;
  align-items: center;
  width:100%;
  flex-wrap: wrap;

  &__img {
    border-radius: 8px;
    max-width: 30px;
    max-height: 30px;
    cursor: pointer;
  }
}

.content_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:25%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.opacity{
  opacity: 0.4;
  background: #e5e5e5;
}
.content_item img{
  margin-bottom: 3px;
  display: block;
}
</style>
